<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="handleModelUpdate"
    title="工作日报填写"
    width="900px"
    :close-on-click-modal="false"
  >
    <div class="daily-report-form">
      <!-- 本日主要行程 -->
      <div class="form-section">
        <h3 class="section-title">本日主要行程</h3>
        <div class="schedule-grid">
          <div class="schedule-item">
            <span class="time-label">9:00</span>
            <el-input v-model="schedule['9:00']" placeholder="填写日程" />
          </div>
          <div class="schedule-item">
            <span class="time-label">10:00</span>
            <el-input v-model="schedule['10:00']" placeholder="填写日程" />
          </div>
          <div class="schedule-item">
            <span class="time-label">11:00</span>
            <el-input v-model="schedule['11:00']" placeholder="填写日程" />
          </div>
          <div class="schedule-item">
            <span class="time-label">12:00</span>
            <el-input v-model="schedule['12:00']" placeholder="填写日程" />
          </div>
          <div class="schedule-item">
            <span class="time-label">13:00</span>
            <el-input v-model="schedule['13:00']" placeholder="填写日程" />
          </div>
          <div class="schedule-item">
            <span class="time-label">14:00</span>
            <el-input v-model="schedule['14:00']" placeholder="填写日程" />
          </div>
          <div class="schedule-item">
            <span class="time-label">15:00</span>
            <el-input v-model="schedule['15:00']" placeholder="填写日程" />
          </div>
          <div class="schedule-item">
            <span class="time-label">17:00</span>
            <el-input v-model="schedule['17:00']" placeholder="填写日程" />
          </div>
          <div class="schedule-item">
            <span class="time-label">18:00</span>
            <el-input v-model="schedule['18:00']" placeholder="填写日程" />
          </div>
          <div class="schedule-item">
            <span class="time-label">19:00</span>
            <el-input v-model="schedule['19:00']" placeholder="填写日程" />
          </div>
          <div class="schedule-item">
            <span class="time-label">20:00</span>
            <el-input v-model="schedule['20:00']" placeholder="填写日程" />
          </div>
        </div>
      </div>

      <!-- 本日业绩统计 -->
      <div class="form-section">
        <h3 class="section-title">本日业绩统计</h3>
        <div class="stats-grid">
          <div class="stat-item">
            <span class="stat-label">新增客源:</span>
            <el-input v-model="stats.newCustomers" placeholder="填写数据" />
          </div>
          <div class="stat-item">
            <span class="stat-label">新增会员:</span>
            <el-input v-model="stats.newMembers" placeholder="填写数据" />
          </div>
          <div class="stat-item">
            <span class="stat-label">成交情况:</span>
            <el-input v-model="stats.dealStatus" placeholder="填写数据" />
          </div>
        </div>
      </div>

      <!-- 本日工作小结 -->
      <div class="form-section">
        <h3 class="section-title">本日工作小结及其他事项说明</h3>
        <el-input
          type="textarea"
          v-model="summary"
          :rows="3"
          placeholder="请输入工作小结"
        />
      </div>

      <!-- 操作按钮 -->
      <div class="form-actions">
        <el-button @click="handleModelUpdate(false)">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
import { ElMessage } from 'element-plus';

// 定义组件属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

// 定义组件事件
const emit = defineEmits(['update:visible', 'submit']);

// 表单数据
const schedule = ref({
  '9:00': '填写完成后按Tab键',
  '10:00': '按键盘上Tab键',
  '11:00': '切换至下一个输入框',
  '12:00': '',
  '13:00': '',
  '14:00': '',
  '15:00': '',
  '17:00': '',
  '18:00': '',
  '19:00': '',
  '20:00': ''
});

const stats = ref({
  newCustomers: '',
  newMembers: '',
  dealStatus: ''
});

const summary = ref('');

// 处理弹窗显示状态更新
const handleModelUpdate = (value) => {
  emit('update:visible', value);
};

// 提交表单
const handleSubmit = () => {
  // 可在此处添加表单验证逻辑
  emit('submit', {
    schedule: { ...schedule.value },
    stats: { ...stats.value },
    summary: summary.value
  });
  ElMessage.success('工作日报提交成功！');
  handleModelUpdate(false);
};
</script>

<style scoped>
.daily-report-form {
  padding: 24px;
}

.form-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.schedule-grid, .stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.schedule-item, .stat-item {
  display: flex;
  flex-direction: column;
  width: calc(33.333% - 13.333px);
}

.time-label, .stat-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.el-input {
  width: 100%;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 32px;
}
</style>